<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-12-29 14:02:23
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-12-29 17:01:40
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    overflow: hidden;
  }

  .videoBox {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
  }

  #btn {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    border-radius: 50%;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    line-height: 50px;
    text-align: center;
  }

  canvas {
    width: 100%;
    height: 100%;
  }

  video {
    position: absolute;
    display: none;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div class="videoBox">
    <img id="poster" src="http://120.77.35.150/video/video-bg.png" alt="">
    <video id="video"
      preload="auto" 
      playsinline="true"
      x-webkit-airplay="true" 
      webkit-playsinline="true" 
      x5-video-player-type="h5" 
      x5-video-orientation="h5"
      x5-video-player-fullscreen="true"
       muted="false" 
       src="http://120.77.35.150/video/2.mp4"></video>
    <canvas id="canvas"></canvas>
    <div id="btn">点击</div>
  </div>
  <script>
    const video = document.getElementById('video');
    const palyBtn = document.getElementById('btn');
    const canvas = document.getElementById('canvas');
    const poster = document.getElementById('poster')
    // 初始化(创建)canvas
    const ctx = canvas.getContext('2d')
    // 获取可视宽高
    const screen_W = window.innerWidth || document.body.clientWidth
    const screen_H = window.innerHeight || document.body.clientHeight
    // 设置画布宽高
    canvas.width = screen_W * 3 // 获取屏幕宽度作为canvas的宽度  这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
    canvas.height = screen_H * 3 + 12
    // 绘制视频
    palyBtn.addEventListener('touchstart', function (e) {
      e.preventDefault()
      poster.style.display = 'none'
      // 绘制背景
      ctx.fillStyle = '#000'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    })
    video.addEventListener('play', playCallBack)
    function playCallBack() {
      if (video.paused) {
        return;
      }
      captureFrame();
      setTimeout(playCallBack, 40);
    }
    function captureFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    }
  </script>
</body>

</html>